<template>
	<div  class="RxInputColor">
		<div style="flex:1;margin-right: 10px">
			<a-input v-model:value="rxColor" type="color" @change="change" placeholder="自定义颜色"/>
		</div>
		<div style="width: 70px">
			<a-input-number v-model:value="opacity" @change="change" style="width: 70px" :min="1" :max="100"/>
		</div>
	</div>
</template>

<script>
import {Util} from "@lowcode/jpaas-base-lib";

export default {
	name: "RxInputColor",
    emits: ["update:modelValue"],
	props:{
        modelValue:{
			type:String,
		    default: '',
		},
	},
	data(){
		return{
			rxColor:'',
			opacity:100,
		}
	},
	mounted() {
		this.init()
	},
	methods:{
		init() {
			if(!this.modelValue){
				return;
			}
			let op = this.modelValue.split(',')[3].split(')')[0];
			this.opacity =Number(op)*100;//获取透明度
			this.rxColor =this.hexify(this.modelValue);
		},
		change(){
			this.$emit('update:modelValue',this.opacityType())
		},
		opacityType(){
			let rgbJson=Util.hexToRgb(this.rxColor);
			return "rgb("+rgbJson.r+","+rgbJson.g+","+rgbJson.b+","+this.opacity/100+")"
		},
		// rgba转换16进制
		hexify(typeColor){
			let values = typeColor
				.replace(/rgba?\(/, '')
				.replace(/\)/, '')
				.replace(/[\s+]/g, '')
				.split(',');
			let a = 1,
				r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
				g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
				b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
			return "#" +
				("0" + r.toString(16)).slice(-2) +
				("0" + g.toString(16)).slice(-2) +
				("0" + b.toString(16)).slice(-2);
		},
	},
}
</script>

<style scoped>
.RxInputColor{
	display: flex;
}
</style>
